<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CustomDialog 组件示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    h1 {
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    .demo-section {
      margin-bottom: 30px;
    }
    .demo-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .demo-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
    }
    button {
      padding: 8px 16px;
      background-color: #409eff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #66b1ff;
    }
    .success-btn { background-color: #67c23a; }
    .success-btn:hover { background-color: #85ce61; }
    .warning-btn { background-color: #e6a23c; }
    .warning-btn:hover { background-color: #ebb563; }
    .error-btn { background-color: #f56c6c; }
    .error-btn:hover { background-color: #f78989; }
    .info-btn { background-color: #909399; }
    .info-btn:hover { background-color: #a6a9ad; }
    code {
      display: block;
      background-color: #f5f7fa;
      padding: 15px;
      border-radius: 4px;
      margin-top: 10px;
      white-space: pre-wrap;
      font-family: monospace;
    }
  </style>
  <!-- 引入自定义弹窗样式 -->
  <link rel="stylesheet" href="../resources/css/calling/component/custom-dialog.css">
</head>
<body>
  <h1>CustomDialog 组件示例</h1>
  
  <div class="demo-section">
    <div class="demo-title">基础用法</div>
    <div class="demo-buttons">
      <button onclick="showBasicAlert()">基础 Alert</button>
      <button onclick="showBasicConfirm()">基础 Confirm</button>
    </div>
    <code>// 基础 Alert
CustomDialog.alert('这是一条基础提示消息');

// 基础 Confirm
CustomDialog.confirm({
  title: '确认操作',
  message: '确定要执行此操作吗？',
  confirmCallback: function() {
    console.log('用户点击了确定');
  },
  cancelCallback: function() {
    console.log('用户点击了取消');
  }
});</code>
  </div>

  <div class="demo-section">
    <div class="demo-title">不同类型</div>
    <div class="demo-buttons">
      <button class="info-btn" onclick="showInfoDialog()">信息</button>
      <button class="success-btn" onclick="showSuccessDialog()">成功</button>
      <button class="warning-btn" onclick="showWarningDialog()">警告</button>
      <button class="error-btn" onclick="showErrorDialog()">错误</button>
    </div>
    <code>// 信息提示
CustomDialog.info('这是一条信息提示');

// 成功提示
CustomDialog.success('操作成功完成！');

// 警告提示
CustomDialog.warning('请注意，这是一个警告！');

// 错误提示
CustomDialog.error('操作失败，请重试！');</code>
  </div>

  <div class="demo-section">
    <div class="demo-title">自定义配置</div>
    <div class="demo-buttons">
      <button onclick="showCustomAlert()">自定义 Alert</button>
      <button onclick="showCustomConfirm()">自定义 Confirm</button>
      <button onclick="showAutoCloseDialog()">自动关闭</button>
    </div>
    <code>// 自定义 Alert
CustomDialog.alert({
  title: '自定义标题',
  message: '这是一条自定义提示消息',
  type: 'success',
  confirmButtonText: '知道了',
  confirmCallback: function() {
    console.log('用户点击了知道了按钮');
  }
});

// 自定义 Confirm
CustomDialog.confirm({
  title: '删除确认',
  message: '确定要删除这条记录吗？删除后将无法恢复！',
  type: 'warning',
  confirmButtonText: '删除',
  cancelButtonText: '取消操作',
  confirmCallback: function() {
    CustomDialog.success('记录已成功删除！');
  }
});

// 自动关闭
var dialog = CustomDialog.info('此弹窗将在3秒后自动关闭');
setTimeout(function() {
  dialog.close();
}, 3000);</code>
  </div>

  <!-- 引入自定义弹窗脚本 -->
  <script src="../resources/js/custom-dialog.js"></script>
  <script>
    // 基础用法
    function showBasicAlert() {
      CustomDialog.alert('这是一条基础提示消息');
    }
    
    function showBasicConfirm() {
      CustomDialog.confirm({
        title: '确认操作',
        message: '确定要执行此操作吗？',
        confirmCallback: function() {
          console.log('用户点击了确定');
        },
        cancelCallback: function() {
          console.log('用户点击了取消');
        }
      });
    }
    
    // 不同类型
    function showInfoDialog() {
      CustomDialog.info('这是一条信息提示');
    }
    
    function showSuccessDialog() {
      CustomDialog.success('操作成功完成！');
    }
    
    function showWarningDialog() {
      CustomDialog.warning('请注意，这是一个警告！');
    }
    
    function showErrorDialog() {
      CustomDialog.error('操作失败，请重试！');
    }
    
    // 自定义配置
    function showCustomAlert() {
      CustomDialog.alert({
        title: '自定义标题',
        message: '这是一条自定义提示消息',
        type: 'success',
        confirmButtonText: '知道了',
        confirmCallback: function() {
          console.log('用户点击了知道了按钮');
        }
      });
    }
    
    function showCustomConfirm() {
      CustomDialog.confirm({
        title: '删除确认',
        message: '确定要删除这条记录吗？删除后将无法恢复！',
        type: 'warning',
        confirmButtonText: '删除',
        cancelButtonText: '取消操作',
        confirmCallback: function() {
          CustomDialog.success('记录已成功删除！');
        }
      });
    }
    
    function showAutoCloseDialog() {
      var dialog = CustomDialog.info('此弹窗将在3秒后自动关闭');
      setTimeout(function() {
        dialog.close();
      }, 3000);
    }
  </script>
</body>
</html>